<script lang="tsx">
import { defineComponent, reactive, computed } from 'vue';

import uList from './components/uList';
import uSetupTest from '@/views/main/system/department/uSetupTest.vue';

export default defineComponent({
  components: {
    uList,
    uSetupTest,
  },

  setup() {
    const list = reactive([
      {
        name: 'cqc',
        age: 26,
        isShow: true,
      },
      {
        name: '战后三',
        age: 32,
        isShow: true,
      },
    ]);

    const headerClick = function (e) {
      e.age++;
      e.isShow = false;
      setTimeout(() => {
        e.isShow = true;
      }, 500);
    };

    const uSetList = computed(() => [list[0]]);

    return () => (
      <div>
        <u-List {...{ list }}>
          {{
            header: (data) => {
              return (
                <div onClick={() => headerClick(data)}>
                  {data.name + data.age}
                </div>
              );
            },

            default: (data) => {
              return <div>{data.age}</div>;
            },
          }}
        </u-List>

        <hr />

        <u-Setup-Test onIClick={headerClick} list={uSetList.value} />
      </div>
    );
  },
});
</script>

<style scoped></style>
